<template>
  <t-dialog
    v-model:visible="visible"
    :header="dialogTitle"
    width="500"
    :confirm-btn="{ loading }"
    @confirm="dialogConfirm"
    @close="dialogHide"
  >
    <t-space direction="vertical" style="width: 100%">
      <t-form ref="form" reset-type="initial" :data="formData" :rules="formRule">
        <t-form-item :label="t('pages.manage.avatar')">
          <common-upload :url="formData.avatar?.url" type="avatar" @confirm="onChooseEnd" @remove="onChooseDel" />
        </t-form-item>
        <t-form-item :label="t('pages.manage.role')" name="roles">
          <t-select v-model="formData.roles" :options="roles" multiple filterable @search="onFilterRole"></t-select>
        </t-form-item>
        <t-form-item :label="t('pages.manage.account')" name="username">
          <t-input v-model="formData.username" maxlength="30" />
        </t-form-item>
        <t-form-item :label="t('pages.manage.pass')" name="password">
          <t-input v-model="formData.password" type="password" min="6" maxlength="20" name="password" show-password />
        </t-form-item>
        <t-form-item :label="t('pages.manage.realname')" name="realname">
          <t-input v-model="formData.realname" maxlength="30" />
        </t-form-item>
        <t-form-item :label="t('pages.manage.email')" name="email">
          <t-input v-model="formData.email" max="32" />
        </t-form-item>
        <t-form-item :label="t('pages.manage.phone')" name="phoneNumber">
          <t-input v-model="formData.phoneNumber" maxlength="11" />
        </t-form-item>
      </t-form>
    </t-space>
  </t-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';

import CommonUpload from '@/components/common-upload/index.vue';
import { t } from '@/locales';

import { FORM_DATA, FORM_RULES, FormItem } from '../constants';

defineProps({
  roles: {
    type: Array,
    default: () => [],
  },
});

const loading = ref(false);
const emits = defineEmits(['removeFile', 'confirm', 'filterRole']);

const dialogTitle = ref('');
const type = ref('add');
const visible = ref(false);
const form = ref(null);
const formData = ref({ ...FORM_DATA });
const formRule = ref({ ...FORM_RULES });

const onFilterRole = (name: string) => {
  emits('filterRole', name);
};

const onChooseEnd = (type: 'avatar', { id, url }: Recordable) => {
  formData.value[type] = { id, url };
};
const onChooseDel = (type: 'avatar') => {
  formData.value[type] = null;
};

const dialogShow = (action: string, row: FormItem) => {
  visible.value = true;
  type.value = action;
  if (action === 'edit') {
    formData.value = JSON.parse(JSON.stringify(row));
    formRule.value.password[0].required = false;
    dialogTitle.value = `${t('common.edit')}【${row.username}】`;
  } else {
    formRule.value.password[0].required = true;
    dialogTitle.value = t('common.add');
  }
};
const dialogHide = () => {
  form.value.reset();
  loading.value = false;
  visible.value = false;
};
const dialogConfirm = async () => {
  const valid = await form.value.validate();
  if (valid !== true) {
    return;
  }
  loading.value = true;
  emits('confirm', type.value, JSON.parse(JSON.stringify(formData.value)));
};
const loadingClear = () => {
  loading.value = false;
};
const setData = (fields: Partial<FormItem>) => {
  Object.assign(formData.value, fields);
};

defineExpose({
  dialogShow,
  dialogHide,
  loadingClear,
  setData,
});
</script>
